<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    
</head>

<body>
<code>
    methods: {
     getLocation(phoneNum) {
         return axios.post('/mm接口', {
             phoneNum
         })
     },    
     getFaceList(province, city) {
         return axios.post('/nn接口', {
             province,
             city
         })
     },  
     getFaceResult () {
          this.getLocation(this.phoneNum).then(res => {
              if (res.status === 200 && res.data.success) {
              let province = res.data.obj.province;
              let city = res.data.obj.city;
                  this.getFaceList(province, city).then(res => {
                        if(res.status === 200 && res.data.success) {
                             this.faceList = res.data.obj
                        }
                  })
              }
         }).catch(err => {
             console.log(err)
         })     
     }
}
这时你看到了then 的链式写法，有一点回调地域的感觉。现在我们在有async/ await 来改造一下。

async/ await案例：

首先把 getFaceResult 转化成一个async 函数，就是在其前面加async， 因为它的调用方法和普通函数的调用方法是一致，所以没有什么问题。
然后就把 getLocation 和getFaceList 放到await 后面，等待执行， getFaceResult  函数修改如下：

async getFaceResult () {
                let location = await this.getLocation(this.phoneNum);
                if (location.data.success) {
                    let province = location.data.obj.province;
                    let city = location.data.obj.city;
                    let result = await this.getFaceList(province, city);
                    if (result.data.success) {
                        this.faceList = result.data.obj;
                    }
                }
            }
现在代码的书写方式，就像写同步代码一样，没有回调的感觉，非常舒服。

现在就还差一点需要说明，那就是怎么处理异常，如果请求发生异常，怎么处理？ 它用的是try/catch 来捕获异常，把await 放到 try 中进行执行，如有异常，就使用catch 进行处理。

async getFaceResult () {
                try {
                    let location = await this.getLocation(this.phoneNum);
                    if (location.data.success) {
                        let province = location.data.obj.province;
                        let city = location.data.obj.city;
                        let result = await this.getFaceList(province, city);
                        if (result.data.success) {
                            this.faceList = result.data.obj;
                        }
                    }
                } catch(err) {
                    console.log(err);
                }
            }
          </code>
</body>

<script>
function login() {
    return new Promise(function (resolve, reject) {
      $.get('/login.php', function (result) {
        resolve(result);
      });
    });
  }
  function user(data) {
    return new Promise(function (resolve, reject) {
      $.get('/user.php', function (result) {
        resolve(result);
      });
    });
  }
  function info(data) {
    return new Promise(function (resolve, reject) {
      $.get('/info.php', function (result) {
        resolve(result);
      });
    });
  }
  login().then(function (data) {
    console.log('处理login');
    //把login异步处理获取的数据，传入到下一个处理中。
    return user(data);
  }).then(function (data) {
    console.log('处理user');
    //把user异步处理获取的数据，传入到下一个处理中。
    return info(data);
  }).then(function (data) {
    console.log('处理info');
  });
  </script>
  

</html>